<!--
 为满足项目中某些场景，例如，页面布局为上中下，上下固定高度，中间自适应占满。
 此组件利用vue具名插槽功能实现，提供name: #header、#default、#footer
-->
<template>
  <div class="no-scroll-layout">
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <slot name="footer" />
    </footer>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.no-scroll-layout {
  height: 100%;
  display: flex;
  flex-direction: column;

  main {
    flex: 1;
    overflow: auto;
  }
}
</style>
